<template>
	<div class="auanyDisplayContent" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/实时数据/<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
				<div class="block">
					<el-form  class="demo-form-inline" :inline="true">
						<el-form-item label="查看日期：" :label-width="formLabelWidth">
							<el-date-picker
							v-model="date"
							align="left"
							placeholder="选择日期"
							@change='dateChange' 
							:picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item  class='conmit'>
							<el-button type="primary"  icon="search" @click="search('form')" :disabled="searchable">查询</el-button>
			    		</el-form-item>
			    		<el-form-item>
							<span>数据实时更新（只能查看最近7天数据），更新时间最近更新时间为：{{nowDate}}</span>
			    		</el-form-item>
					</el-form>
				</div>
			</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">查询结果</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel('1','实时数据-Auany统计概况-查询结果')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="tabelDatas"
					    border
						show-summary
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'activeUser', order: 'descending'}"  @sort-change="sortChange"
					    >
					    <el-table-column  align="center" sortable
					        v-for="col in tabelHead" :key='col.prop'
					        :prop="col.prop" :label="col.label">
					    </el-table-column>
					  </el-table>
					</template>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./auanyDisplay.styl"></style>
<script src="./auanyDisplay.js"></script>
